<template>
  <div class="message__content markedown__body" v-html="message" @click="handleContentClick"></div>
</template>

<script>
import { copyFunc, rendererMD } from '@/utils'

export default {
  name: '',
  components: {
  },
  props: {
    content: String,
    item: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
    }
  },
  computed: {
    message () {
      return rendererMD(this.content || '', { mangle: false, headerIds: false })
    }
  },
  methods: {
    handleContentClick (e) {
      if (e.target?.classList.contains('copy-btn')) {
        const target = e.target
        const content = target.parentNode?.nextSibling?.textContent || ''
        copyFunc(content)
        return
      }
      if (e.target.nodeName === 'A') {
        const atarget = e.target
        this.$xz('OpenUrl', atarget.getAttribute('href'))
        e.preventDefault()
      }
    }
  }
}

</script>

<style lang="scss" scoped>
.message__content {
  line-height: 1.8;
}
</style>
